<template>
    <div class="activities-container">
      <div class="activities-wrapper">
        <!-- 返回按钮 -->
        <div class="back-button" @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
          <span>返回</span>
        </div>
  
        <!-- 标题 -->
        <h1 class="page-title">活动列表</h1>
  
        <!-- 活动列表 -->
        <div class="activity-list">
          <div class="activity-item" v-for="(item, index) in activityList" :key="index">
            <div class="activity-image"></div>
            <div class="activity-content">
              <div class="activity-title">{{ item.title }}</div>
              <div class="activity-deadline">报名截止时间：{{ formatDate(item.deadline) }}</div>
            </div>
            <el-button type="primary" class="register-btn">立即报名</el-button>
          </div>
        </div>
  
        <!-- 分页组件 -->
        <div class="pagination-container">
          <Pagination 
            :current-page="currentPage" 
            :total="totalActivities" 
            :page-size="pageSize"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { ArrowLeft } from '@element-plus/icons-vue';
  import { useRouter } from 'vue-router';
  import { formatDate } from '@/utils/index.js';
  import Pagination from '@/components/Pagination.vue';
  
  const router = useRouter();
  
  // 分页数据
  const currentPage = ref(1);
  const pageSize = ref(10);
  const totalActivities = ref(988);
  
  // 活动列表数据
  const activityList = ref([]);
  
  // 返回上一页
  const goBack = () => {
    router.back();
  };
  
  // 格式化时间
  const formatTime = (timestamp) => {
    return formatTimestamp(timestamp, 'YYYY-MM-DD HH:mm');
  };
  
  // 页码变化处理
  const handlePageChange = (page) => {
    currentPage.value = page;
    fetchActivities();
  };

  const handleSizeChange = (size) => {
    pageSize.value = size;
    fetchActivities();
  };
  
  // 获取活动数据
  const fetchActivities = () => {
    // 模拟数据，实际项目中应该调用API
    activityList.value = Array(7).fill().map((_, index) => ({
      title: '一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题一级标题',
      deadline: new Date('2023-02-23 16:00').getTime()
    }));
  };
  
  onMounted(() => {
    fetchActivities();
  });
  </script>
  
  <style scoped lang="scss">
  .activities-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    background-color: #ecf4f2;
    min-height: 100vh;
  }
  
  .activities-wrapper {
    width: 1000px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
  }
  
  .back-button {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 20px;
    color: #333;
    
    span {
      margin-left: 5px;
    }
    
    &:hover {
      color: #126983;
    }
  }
  
  .page-title {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 500;
    text-align: center;
  }
  
  .activity-list {
    margin-bottom: 20px;
  }
  
  .activity-item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  .activity-image {
    width: 95px;
height: 76px;
    background-color: #eee;
    margin-right: 15px;
    flex-shrink: 0;
  }
  
  .activity-content {
    // flex: 1;
    width:699px;
  }
  
  .activity-title {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight:600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .activity-deadline {
    color: #f56c6c;
    font-size: 14px;
    font-weight:600;
  }
  
  .register-btn {
    width: 100px;
    background-color: #126983;
    border-color: #126983;
  }
  
  .pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }
  
  .total-activities {
    color: #666;
  }
</style>